<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台管理首页</title>
    <!--引入vue.js库-->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
    <script src="/js/vue.js"></script>
    <!-- element-ui引入样式 展示数据的 -->
    <!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <link rel="stylesheet" href="/css/index.css">
    <!-- element-ui引入组件库 -->
    <!--<script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
    <script src="/js/index.js"></script>
    <!--引入axios库  从后端获取数据-->
    <!--<script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
    <script src="/js/axios.min.js"></script>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .el-header, .el-footer {
            background-color: #001529;
            color: #fff;
            text-align: center;
            line-height: 60px;
            /*height: 200px;*/
        }

        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
            line-height: 36px;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            line-height: 36px;
        }

        body > .el-container {
            margin-bottom: 40px;
        }

        /*.el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 36px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 36px;
        }*/
    </style>
</head>
<body><!--onload="" 页面加载就调用的执行方法,用于页面初始化  元素JS的用法-->
    <!--vue必须绑定根标签-->
    <div id="app">
        <el-container>
            <el-header>
                <el-row >
                    <el-col :span="6"><div class="grid-content bg-purple">旅游乐后台管理系统</div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple-light">&nbsp;</div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple" style="color: #2fb9d4">{{currentDateTime}}&nbsp;{{week}}</div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple-light">
                        <el-menu
                                :default-active="activeIndex2"
                                class="el-menu-demo"
                                mode="horizontal"
                                background-color="#001529"
                                text-color="#fff"
                                active-text-color="#ffd04b">

                            <el-submenu index="2">
                                <template slot="title">{{userInfo.userName}}-{{userInfo.loginName}}</template>
                                <el-menu-item index="2-1">个人中心</el-menu-item>
                                <el-menu-item  index="2-2">切换账号</el-menu-item>
                                <el-menu-item index="2-3" @click="logout">退出</el-menu-item>
                            </el-submenu>
                            <el-menu-item index="4"><a href="https://www.baidu.com" target="_blank">百度首页</a></el-menu-item>
                        </el-menu>
                    </div></el-col>
                </el-row>

            </el-header>

            <el-container>

                <!--左侧菜单-->
                <el-aside width="200px" >

                    <!--左侧menu菜单-->
                    <!--无用属性-->
                    <!--@open="handleOpen"
                    @close="handleClose"-->
                    <el-menu default-active="2"
                             class="el-menu-vertical-demo"
                             background-color="#545c64"
                             text-color="#fff"
                             active-text-color="#ffd04b">
                        <!--最外层导航栏-->
                        <el-submenu :index="navMenu.id+''" v-for="navMenu in data">
                            <template slot="title">
                                <i :class="navMenu.icon"></i>
                                <span>{{navMenu.label}}</span>
                            </template>
                            <el-menu-item-group :index="navMenu.id+''" v-for="cnavMenu in navMenu.children">
                                <template slot="title" :url="cnavMenu.url"></template>
                                <el-menu-item index="1-1" @click="cclick(cnavMenu.label,cnavMenu.url)">
                                    {{cnavMenu.label}}
                                </el-menu-item>

                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>

                    <!--左侧tree菜单-->
                    <!--<el-tree :data="data"
                             :props="defaultProps"
                             @node-click="handleNodeClick">

                    </el-tree>-->

                </el-aside>

                <el-container>
                    <el-main>Main
                        <!--<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>-->
                        <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">

                            <el-tab-pane
                                    v-for="(item, index) in editableTabs"
                                    :key="item.name"
                                    :label="item.title"
                                    :name="item.name">
                                <iframe :src="item.url"  width="100%" height="600px;" frameborder="0"></iframe>
                            </el-tab-pane>

                        </el-tabs>
                    </el-main>
                    <el-footer>Footer</el-footer>
                </el-container>
            </el-container>


        </el-container>
    </div>
    <script>
        /*$(function(){
            Jquery的方式调用页面初始化方法
        })*/
        //js代码
        var vue = new Vue({
            el:"#app",
            data(){ //存放使用的所有属性数据
                return{ //方便编写表单校验
                    //和页签页有关属性开始
                    editableTabsValue: '1',
                    editableTabs: [{
                        title: '默认页',
                        name: '1',
                        // content: 'Tab 1111111111111 content'
                        url:''

                    }],

                    tabIndex: 1,
                    data:[],
                    defaultProps: {
                        children: 'children',
                        label: 'label'
                    },

                    //头部导航相关属性
                    currentDateTime:'',//获取当前时间
                    week:'',//星期几
                    activeIndex2:'1', //导航栏默认激活
                    userInfo:{} //登录人信息对象
                }
            },
            created:function(){//页面初始化时，需要执行的业务可以放入该方法
                //调用加载数据方法
                this.loadData();
            },
            methods:{ //存放所有使用的方法(函数)
                //封装请求数据的方法
                loadData(){
                    //在使用axios发生请求之前，定义变量_this=this，代指Vue对象
                    var _this = this;
                    //使用axios向后台发请求
                    axios.get('/menu/queryTreeDataByUserId') //请求的url
                        .then(function (response) {//回调函数
                            //前端控制台打印   response 是json对象
                            console.log(response);
                            // JSON.stringify() 把json对象转为字符串
                            console.log(JSON.stringify(response));
                            //response获取后台数据时，一定要加data response.data相当于从响应的body中获取
                            if (response.data.code==200){
                                //这里面直接写this相当于axios对象,不是Vue,
                                /*this.tableData = response.data.data.list; 错误的 */
                                _this.data = response.data.data;
                                console.log(_this.data);
                            }
                        })
                        .catch(function (error) {//异常处理
                            console.log(error);
                        });
                    //获取用户登录后的信息
                    axios.get('/user/getLoginSession')
                        .then(function (response) {
                            if(response.data.code==200){
                                _this.userInfo=response.data.data;
                            }
                        });
                    // 调用两个方法，给头部导航栏gettime和week赋值
                    this.currentTime();
                    this.getWeek();
                },
                //菜单节点点击方法
                cclick(t1, t) {
                    let _this=this
                    if (t != null && t != '' && t != 'null' && t != 'undefined') {
                        //当点击左侧菜单时，添加页签(先判断该菜单是否有子节点，如果没有，就添加)
                        this.addTab(t1, t);
                    }
                },

                //树节点点击方法
                handleNodeClick(data) {
                    console.log(data);
                    /*alert(JSON.stringify(data));*/

                    //console.log(JSON.stringify(data));
                    if(data.url!=null&&data.url!=''&&data.url!='null'&&data.url!='undefined'){
                        //当点击左侧菜单时，添加页签(先判断该菜单是否有子节点，如果没有，就添加)
                        if (data.children==null){
                            this.addTab(data.label,data.url);
                        }
                    }
                },

                //添加页签`
                addTab(targetName,url) {
                    let newTabName = ++this.tabIndex + '';//让tabIndex加1

                    //获取所有的标签页
                    let tabs = this.editableTabs;
                    //定义是否已经标签变量
                    var  isHaveTab = false;
                    //循环所有页签页
                    tabs.forEach((tab, index) => {
                        //如果为true 说明当前点击节点（部门管理），已经存在标签页
                        if(targetName === tab.title){// 判断是否相等  1=='1' 值相等  true   1==='1'  false 类型和值都香港等
                            isHaveTab = true;
                            newTabName =tab.name;
                        }
                    });

                    //isHaveTab  集合中没有的时候，添加
                    if(!isHaveTab) {
                        this.editableTabs.push({//向数组中添加数据
                            title: targetName,
                            name: newTabName,
                            url: url
                        });
                    }
                    //让它高亮
                    this.editableTabsValue = newTabName;
                },



                //删除页签
                removeTab(targetName) {
                    let tabs = this.editableTabs;
                    let activeName = this.editableTabsValue;
                    if (activeName === targetName) {
                        tabs.forEach((tab, index) => {
                            if (tab.name === targetName) {
                                let nextTab = tabs[index + 1] || tabs[index - 1];
                                if (nextTab) {
                                    activeName = nextTab.name;
                                }
                            }
                        });
                    }

                    this.editableTabsValue = activeName;
                    this.editableTabs = tabs.filter(tab => tab.name !== targetName);
                },
                //头部导航获取当前时间
                getTime:function(){
                    //获取当前时间
                    let currentDate  =new Date();
                    //获取到4位的年 2022
                    let yy = currentDate.getFullYear();
                    let mm = currentDate.getMonth()+1;
                    let dd = currentDate.getDate();
                    let hh = currentDate.getHours();
                    //currentDate.getMinutes()<10    0-9   ->  00 - 09
                    let mf = currentDate.getMinutes()<10 ? '0'+currentDate.getMinutes() : currentDate.getMinutes();
                    let ss = currentDate.getSeconds()<10 ? '0'+currentDate.getSeconds() : currentDate.getSeconds();
                    this.currentDateTime = yy+'-'+mm+'-'+dd+' '+hh+':'+mf+':'+ss;
                },
                //每隔0.5秒调用getTime属性
                currentTime(){
                    //setInterval(param1,param2)  每个param2间隔时间调回用方法param1
                    setInterval(this.getTime,500)
                },
                //获取星期几
                getWeek(){
                    //java String   "abc".charAt(1)  返回某一个字符串"abc"1位置上的字符
                    //.getDay() 获取星期几的数字 0-6    周日是第1天
                    //.getDate() 获取档期日期的每月第几天   2020-03-12  12
                    console.log("星期"+new Date().getDay());
                    //charAt 返回指定字符串位置上的值  "abcdef".charAt(0) = a     "abcdef".charAt(2) = c
                    this.week='星期'+"日一二三四五六".charAt(new Date().getDay());
                },
                //用户退出方法
                logout(){
                    // logout 不用自己写方法  调用shiro退出配置  调用配置时 它会调用LogoutFilter 做销毁session操作
                    axios.get('/user/login')  //指定请求的url及参数  get
                        .then(function (response) {  //正确返回对象的处理
                            location.href="/html/back/login.html";
                        })
                }


            }
        })
    </script>
</body>
</html>